<script setup>
import { ref } from 'vue'
import PieChart from './components/PieChart.vue'
import LineChart from './components/LineChart.vue'
import LineChartDouble from './components/LineChartDouble.vue'
import LineBar from './components/LineBar.vue'
import LineDouble from './components/LineDouble.vue'
import Bar2D from './components/Bar2D.vue'
import ProgressVue from './components/ProgressVue.vue'
import SigleBar from './components/SigleBar.vue'
const cangchu = ref([
  {
    label: '仓房数(个）',
    value: 8
  },
  {
    label: '港口数(个）',
    value: 10
  },
  {
    label: '泊位数(个）',
    value: 12
  },
  {
    label: '储备计划',
    value: 20
  },
  {
    label: '使用仓房数(个）',
    value: 2
  },
  {
    label: '库点数量(个）',
    value: 100
  }
])

const select1 = ref('最近七天')

const model = ref(1)

// 人车进出信息
const data = ref([
  {
    name: '张三',
    type: '人员',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '人员',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '人员',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  },
  {
    name: '张三',
    type: '车辆',
    enterTime: '2023-08-01 08:00:00',
    exitTime: '2023-08-01 17:00:00'
  }
])

const data1 = ref([
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' },
  { name: '设备温度异常', position: '1号筒仓皮带T183' }
])

const radio = ref(1)

const search = ref('')
const selected = ref(1)
</script>

<template>
  <header class="height-95 flex flex-ac">
    <img src="/imgs/1.png" alt="" class="ml-75 width-30 point" />
    <div style="width: 3154rem" class="ml-70"></div>
    <img src="/imgs/首页@2x.png" class="point width-124" alt="" />
    <div class="line ml-34"></div>
    <div class="hms fs-36 dt white ml-40">{{ `18:42:00` }}</div>
    <div class="line ml-17"></div>
    <div class="ymdw lh-18 ml-18 mt-13">
      <p class="fs-16 sr white">{{ `星期二` }}</p>
      <p class="fs-12 gray dt mt-3">{{ `2025/08/26` }}</p>
    </div>
  </header>

  <section class="flex flex-sb mt-28" style="height: calc(100% - 95rem - 28rem)">
    <div class="left ml-45">
      <template v-if="model === 1">
        <div class="title pt-10 pl-36">仓储概览</div>
        <div class="height-298 pr-30 flex mt-33">
          <div style="width: calc(212rem + 137rem + 30rem)" class="pos-r">
            <div style="width: 846rem; height: 100rem; background: url('../public/imgs/底座库容量.png') no-repeat center/cover; left: -30rem; top: 0rem" class="pos-a">
              <span class="pos-a fs-18 sr gray" style="left: 243rem; top: 30rem"> 库容量(吨） </span>
              <span class="pos-a fs-32 dt flash" style="left: 223rem; top: 65rem"> 3420375 </span>
            </div>
            <div style="width: 846rem; height: 100rem; background: url('../public/imgs/底座实时库容量.png') no-repeat center/cover; left: -30rem; top: 140rem" class="pos-a">
              <span class="pos-a fs-18 sr gray" style="left: 233rem; top: 30rem"> 实时库容量(吨) </span>
              <span class="pos-a fs-32 dt flash" style="left: 223rem; top: 65rem"> 2420375 </span>
            </div>
          </div>
          <div class="flex flex-wrap flex-sb" style="width: calc(279rem + 19rem + 279rem)">
            <div class="width-279 height-71 c-btn flex flex-ac flex-sb pl-24 pr-44" v-for="(value, index) in cangchu" :key="index">
              <span class="fs-16 gray sr">{{ value.label }}</span>
              <span class="dt fs-30 flash">{{ value.value }}</span>
            </div>
          </div>
        </div>

        <div class="title pt-10 pl-36">存粮统计</div>
        <div class="px-80 flex pt-33" style="height: 461rem">
          <div>
            <p class="fs-20 ysb lh-0 white pl-58">粮食品种结构</p>
            <pie-chart
              :data="[
                { name: '小麦', val: 562 },
                {
                  name: '稻谷',
                  val: 326
                },
                {
                  name: '玉米',
                  val: 201
                }
              ]"
            />
          </div>
          <div>
            <p class="fs-20 ysb lh-0 white pl-58">粮食性质结构</p>
            <pie-chart
              :data="[
                { name: '政策粮', val: 235 },
                {
                  name: '贸易粮',
                  val: 86
                }
              ]"
            />
          </div>
        </div>

        <div class="title pt-10 pl-36">经营统计</div>
        <div class="pt-44 pl-36" style="height: 471rem">
          <line-chart
            :data="[
              ['江阴库', '靖江库', '周集直属库', '杭州库', '大丰康启新'],
              [10, 20, 12, 18, 5],
              [20, 5, 18, 4, 11]
            ]"
          />
        </div>
      </template>

      <template v-if="model === 2">
        <div class="title pt-10 pl-36">存量统计</div>
        <div class="px-80 flex pt-33" style="height: 461rem">
          <div>
            <p class="fs-20 ysb lh-0 white pl-58 flex flex-ac flex-sb"><span>入库量(吨)</span><span class="dt fs-24 flash">3344</span></p>
            <pie-chart
              :data="[
                { name: '小麦', val: 562 },
                {
                  name: '稻谷',
                  val: 326
                },
                {
                  name: '玉米',
                  val: 201
                }
              ]"
            />
          </div>
          <div>
            <p class="fs-20 ysb lh-0 white pl-58 flex flex-ac flex-sb"><span>出库量(吨)</span><span class="dt fs-24 flash">3344</span></p>
            <pie-chart
              :data="[
                { name: '政策粮', val: 235 },
                {
                  name: '贸易粮',
                  val: 86
                }
              ]"
            />
          </div>
        </div>

        <div class="title pt-10 pl-36">安防统计</div>
        <div class="px-40 flex pt-31" style="height: 447rem">
          <div class="h100">
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">摄像头数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['摄像头数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">摄像头在线率</span>
              <ProgressVue :data="[300, 30]" class="ml-15" />
            </div>
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">道闸数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['道闸数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">道闸在线率</span>
              <ProgressVue :data="[300, 80]" class="ml-15" />
            </div>
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">测速设备数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">设备离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['道闸数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">道闸在线率</span>
              <ProgressVue :data="[300, 80]" class="ml-15" />
            </div>
          </div>
        </div>

        <div class="title pt-10 pl-36">人/车进出信息</div>
        <el-table v-tableAutoScroll height="400rem" class="custom mt-10" :data="data">
          <el-table-column label="进出对象" prop="name"> </el-table-column>
          <el-table-column label="进出对象类型" prop="type"> </el-table-column>
          <el-table-column label="进入时间" prop="enterTime"> </el-table-column>
          <el-table-column label="出门时间" prop="exitTime"> </el-table-column>
        </el-table>
      </template>

      <template v-if="model === 3">
        <div class="flex mt-30">
          <div class="width-434 height-148" style="background: url('/imgs/库点数量.png') no-repeat center/cover"></div>
          <div class="width-434 height-148 ml-87" style="background: url('/imgs/已接入库点数(个) .png') no-repeat center/cover"></div>
        </div>

        <div class="px-40 flex pt-31 mt-30" style="height: 447rem">
          <div class="h100">
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">摄像头数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['摄像头数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">摄像头在线率</span>
              <ProgressVue :data="[300, 30]" class="ml-15" />
            </div>
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">道闸数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['道闸数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">道闸在线率</span>
              <ProgressVue :data="[300, 80]" class="ml-15" />
            </div>
            <div class="flex">
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round1"></div>
                  <div class="ml-7 width-130 gray fs-16 sr">测速设备数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <div>
                <div class="flex flex-ac flex-sb">
                  <div class="round2"></div>
                  <div class="ml-7 width-140 gray fs-16 sr">设备离线数量(个)</div>
                </div>
                <div class="mt-18 fs-32 dt white pl-15">150</div>
              </div>
              <Bar2D
                :width="330"
                :height="100"
                :data="[
                  ['道闸数量', '离线数量'],
                  [50, 30]
                ]"
              />
              <span class="gray fs-16 sr flex-shrink0 ml-15 width-110">道闸在线率</span>
              <ProgressVue :data="[300, 80]" class="ml-15" />
            </div>
          </div>
        </div>

        <div class="title mt-50 pt-10 pl-36">实时风险信息</div>

        <div class="flex flex-wrap flex-sb flex-content-start" style="height: 550rem; width: 948rem">
          <div class="danger pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 red">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (3).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
          <div class="middle pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 orange">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (4).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
          <div class="down pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 skyblue">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (5).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
        </div>
      </template>

      <template v-if="model === 4">
        <div class="title pt-10 pl-36">监控设备列表</div>

        <div class="mt-10" style="width: 600rem; height: 1158rem; background: url('/imgs/bg_监控列表.png') no-repeat center/cover">
          <el-input v-model="search" placeholder="请输入设备名称" class="m-10"> </el-input>

          <div class="height-54 pl-38 flex flex-ac" style="background: url('/imgs/bg_仓内摄像头.png') no-repeat center/cover">
            <img src="/imgs/ic_仓内摄像头.png" alt="" style="width: 45rem" />

            <span class="fs-24 sr white ml-15">仓内摄像头</span>
          </div>

          <ul class="pl-24 pr-20">
            <li class="height-54 flex flex-ac flex-sb pr-50 pl-50">
              <div class="flex flex-ac">
                <img src="/imgs/ic_摄像头.png" alt="" class="width-33" />
                <span class="fs-20 white">1号仓内</span>
              </div>
              <img src="/imgs/ic_播放.png" alt="" class="width-28" />
            </li>

            <li class="height-54 flex flex-ac flex-sb pr-50 pl-50" style="background: url('/imgs/bg_选中摄像头.png') no-repeat center/cover">
              <div class="flex flex-ac">
                <img src="/imgs/ic_摄像头.png" alt="" class="width-33" />
                <span class="fs-20 white">1号仓内</span>
              </div>
              <img src="/imgs/ic_暂停.png" alt="" class="width-28" />
            </li>
          </ul>
        </div>
      </template>
    </div>
    <div style="width: 1800rem; height: 100%" class="pos-r">
      <div class="flex flex-jc">
        <div class="width-265 height-76 flex flex-ac flex-jc ysb fs-30 blue2 toggle-btn point hover" :class="{ 'is-checked': selected === 1 }" @click="selected = 1">
          <img src="/imgs/盾牌.png" class="width-26 height-30" style="margin-top: -15rem" /> <span class="ml-11" style="margin-top: -10rem">仓储数据</span>
        </div>
        <div class="width-265 height-76 flex flex-ac flex-jc ysb fs-30 blue2 point hover toggle-btn" :class="{ 'is-checked': selected === 2 }" @click="selected = 2">
          <img src="/imgs/摄像头.png" class="width-26 height-30" style="margin-top: -15rem" /> <span class="ml-11" style="margin-top: -10rem">视频监控</span>
        </div>
        <div class="width-265 height-76 flex flex-ac flex-jc ysb fs-30 blue2 point hover toggle-btn" :class="{ 'is-checked': selected === 3 }" @click="selected = 3">
          <img src="/imgs/房子.png" class="width-26 height-30" style="margin-top: -15rem" /> <span class="ml-11" style="margin-top: -10rem">库点概念</span>
        </div>
        <div class="width-265 height-76 flex flex-ac flex-jc ysb fs-30 blue2 point hover toggle-btn" :class="{ 'is-checked': selected === 4 }" @click="selected = 4">
          <img src="/imgs/房子2.png" class="width-26 height-30" style="margin-top: -15rem" /> <span class="ml-11" style="margin-top: -10rem">仓储数据</span>
        </div>
      </div>
      <el-button @click="model = 1">首页</el-button>
      <el-button @click="model = 2">库点</el-button>
      <el-button @click="model = 3">安防</el-button>
      <el-button @click="model = 4">监控</el-button>

      <div class="legend pos-a" style="right: 103rem; bottom: 66rem"></div>

      <div class="width-192 height-197 flex flex-ac flex-jc pos-a" style="background: url('/imgs/组 2247 (7).png') no-repeat center/cover; right: 33rem; top: 77rem">
        <el-radio-group v-model="radio" class="radio-group ml-35">
          <el-radio :label="1">仓库信息</el-radio>
          <el-radio :label="2">设备</el-radio>
          <el-radio :label="3">告警热力图</el-radio>
        </el-radio-group>
      </div>

      <div class="flex flex-jc pos-a" style="bottom: 62rem; left: 50%; transform: translateX(-50%)">
        <div class="width-261 height-70 flex flex-ac flex-jc ysb fs-24 bold white" style="background: url('/imgs/华东经营部.png') no-repeat center/cover">华东经营部</div>
        <div class="width-261 height-70 flex flex-ac flex-jc ysb fs-24 bold white" style="background: url('/imgs/华东经营部.png') no-repeat center/cover">华东经营部</div>
        <div class="width-261 height-70 flex flex-ac flex-jc ysb fs-24 bold white" style="background: url('/imgs/华东经营部.png') no-repeat center/cover">华东经营部</div>
      </div>
    </div>
    <div class="right mr-45">
      <template v-if="model === 1">
        <div class="title pt-10 pl-36">粮情统计</div>
        <div class="height-390 flex">
          <div>
            <p class="mt-10 fs-16 gray">单位:个</p>
            <div class="normal mt-30">
              <p class="pt-70 fs-32 dt pl-145 flash">23577</p>
            </div>
            <div class="question mt-17">
              <p class="pt-70 fs-32 dt pl-145 flash">26</p>
            </div>
          </div>
          <div>
            <line-chart-double
              :data="[
                ['江阴库', '靖江库', '周集直属库', '杭州库', '大丰康启新'],
                [10, 20, 12, 18, 5],
                [20, 5, 18, 4, 11]
              ]"
            />
          </div>
        </div>

        <div class="title pt-10 pl-36">存量统计</div>
        <div class="px-80 flex pt-33" style="height: 416rem">
          <div>
            <line-bar
              :data="[
                ['江阴库', '靖江库', '周集直属库', '杭州库', '大丰康启新'],
                [10, 20, 12, 18, 5],
                [20, 5, 18, 4, 11]
              ]"
            />
          </div>
        </div>

        <div class="title pt-10 pl-36 flex flex-sb">
          经营统计
          <el-select v-model="select1" class="width-197 height-31 select" style="margin-top: -10rem">
            <el-option>最近七天</el-option>
          </el-select>
        </div>
        <div class="px-80 flex pt-33" style="height: 416rem">
          <div>
            <line-double
              :data="[
                ['2025-07', '2025-08', '2025-09', '2025-10', '2025-11'],
                [10, 20, 12, 18, 5],
                [20, 5, 18, 4, 11]
              ]"
            />
          </div>
        </div>
      </template>

      <template v-if="model === 2">
        <div class="title pt-10 pl-36 flex flex-sb">
          预警信息统计
          <el-select v-model="select1" class="width-197 height-31 select" style="margin-top: -10rem">
            <el-option>最近七天</el-option>
          </el-select>
        </div>

        <div class="height-244 flex px-70 flex-ac flex-sb">
          <div class="width-287 height-146 pos-r" style="background: url('/imgs/高级预警@2x.png') no-repeat center/cover"></div>
          <div class="width-287 height-146 pos-r" style="background: url('/imgs/中级预警@2x.png') no-repeat center/cover"></div>
          <div class="width-287 height-146 pos-r" style="background: url('/imgs/低级预警@2x.png') no-repeat center/cover"></div>
        </div>

        <div class="title pt-10 pl-36">人/车进出信息</div>
        <el-table v-tableAutoScroll height="330rem" class="custom custom2 mt-10" :data="data1">
          <el-table-column label="" prop="name" width="60rem">
            <template #default>
              <img src="/imgs/形状 1068@2x.png" alt="" class="width-42 height-40 mt-10" style="margin-left: -20rem" />
            </template>
          </el-table-column>
          <el-table-column label="告警信息" prop="name"> </el-table-column>
          <el-table-column label="告警位置" prop="position">
            <template #default="scope">
              <div class="flex flex-ac">
                <img src="/imgs/形状 528.png" alt="" />
                <span class="dt flash ml-13">{{ scope.row.position }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="title mt-50 pt-10 pl-36">实时风险信息</div>

        <div class="flex flex-wrap flex-sb flex-content-start" style="height: 550rem; width: 948rem">
          <div class="danger pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 red">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (3).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
          <div class="middle pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 orange">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (4).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
          <div class="down pl-16 pt-20 pr-21 flex mt-5">
            <img src="/imgs/形状 1068.png" alt="" style="width: 53rem; height: 51rem" />
            <div class="flex flex-sb w100">
              <div class="ml-10">
                <p class="sr fs-18 skyblue">南梁荆山粮库</p>
                <p class="fs-16 sr mt-15 white-half">监测到4仓存在擅自动用现象</p>
              </div>

              <div>
                <p class="fs-16 white">已处理</p>
                <img src="/imgs/组 2247 (5).png" alt="" style="width: 74rem" class="mt-12" />
              </div>
            </div>
          </div>
        </div>
      </template>

      <template v-if="model === 3">
        <div class="title pt-10 pl-36 flex flex-sb">
          预警信息统计
          <el-select v-model="select1" class="width-197 height-31 select" style="margin-top: -10rem">
            <el-option>最近七天</el-option>
          </el-select>
        </div>
        <img src="/imgs/组 2242.png" alt="" style="margin: 15rem auto; width: 828rem" />
        <div class="flex px-60 flex-sb">
          <div class="width-286 height-284" style="background: url('/imgs/高级预警.png') no-repeat center/cover">
            <div class="height-150 pos-r">
              <span class="pos-a fs-32 dt flash" style="top: 50rem; right: 100rem">3</span>
            </div>
            <div class="flex">
              <span class="gray fs-16 sr width-100 flex-shrink0 pl-20">预警闭环率</span>
              <progress-vue :data="[0, 30]" class="ml-15" />
            </div>
          </div>
          <div class="width-286 height-284" style="background: url('/imgs/中级预警.png') no-repeat center/cover">
            <div class="height-150 pos-r">
              <span class="pos-a fs-32 dt flash" style="top: 50rem; right: 100rem">3</span>
            </div>
            <div class="flex">
              <span class="gray fs-16 sr width-100 flex-shrink0 pl-20">预警闭环率</span>
              <progress-vue :data="[0, 10]" class="ml-15" />
            </div>
          </div>
          <div class="width-286 height-284" style="background: url('/imgs/低级预警.png') no-repeat center/cover">
            <div class="height-150 pos-r">
              <span class="pos-a fs-32 dt flash" style="top: 50rem; right: 100rem">3</span>
            </div>
            <div class="flex">
              <span class="gray fs-16 sr width-100 flex-shrink0 pl-20">预警闭环率</span>
              <progress-vue :data="[0, 90]" class="ml-15" />
            </div>
          </div>
        </div>

        <img src="/imgs/组 2242 (1).png" alt="" style="margin: 15rem auto; width: 828rem" />
        <div class="px-80 flex pt-33" style="height: 416rem">
          <div>
            <sigle-bar
              :data="[
                ['江阴库', '靖江库', '周集直属库', '杭州库', '大丰康启新'],
                [10, 20, 12, 18, 5]
              ]"
            />
          </div>
        </div>

        <img src="/imgs/组 2242 (2).png" alt="" style="margin: 61rem auto 15rem; width: 828rem" />
        <div class="px-80 flex pt-33" style="height: 416rem">
          <div>
            <sigle-bar
              :data="[
                ['江阴库', '靖江库', '周集直属库', '杭州库', '大丰康启新'],
                [10, 20, 12, 18, 5]
              ]"
            />
          </div>
        </div>
      </template>
    </div>
  </section>
</template>

<style lang="scss" scoped>
header {
  background: url('/imgs/头部.png') no-repeat center/cover;
  .line {
    width: 1rem;
    height: 23rem;
    background: rgba(155, 164, 187, 1);
    opacity: 0.2;
  }
}
.left {
  width: 983rem;

  .c-btn {
    background: url('/imgs/特殊按钮04.png') no-repeat center/cover;
    margin-bottom: 16rem;
  }
}
.right {
  width: 983rem;
}
.title {
  width: 964rem;
  // height: 71rem;
  padding-left: 37rem;
  height: 48rem;
  background: url('/imgs/组 2248@2x.png') no-repeat center/cover;
  font-family: 'ysb';
  font-size: 24rem;
  color: #ffffff;
  line-height: 21rem;
}
.normal,
.question {
  width: 307rem;
  height: 132rem;
}
.normal {
  background: url('/imgs/正常仓房.png') no-repeat center/cover;
}
.question {
  background: url('/imgs/异常仓库.png') no-repeat center/cover;
}

.select {
  width: 197rem;
  :deep(.el-select__wrapper) {
    width: 100%;
    flex-shrink: 0;
    font-size: 14rem;
    color: #fff;
    min-height: 0;
    height: 100%;
    background: rgba(1, 57, 112, 0.1);
    box-shadow: 1px solid rgba(0, 0, 0, 0.5);
  }
}
.legend {
  width: 192rem;
  height: 147rem;
  background: url('/imgs/图例@2x.png') no-repeat center/cover;
}
.round1 {
  width: 8rem;
  height: 8rem;
  background: #007eff;
  border-radius: 50%;
}
.round2 {
  width: 8rem;
  height: 8rem;
  background: rgba(155, 164, 187, 1);
  border-radius: 50%;
}

.danger {
  width: 470rem;
  height: 109rem;
  background: url('/imgs/组 2247.png') no-repeat center/cover;
}

.middle {
  width: 470rem;
  height: 109rem;
  background: url('/imgs/组 2247 (1).png') no-repeat center/cover;
}

.down {
  width: 470rem;
  height: 109rem;
  background: url('/imgs/组 2247 (2).png') no-repeat center/cover;
}

:deep(.radio-group) {
  .el-radio {
    --el-radio-input-height: 19rem;
    --el-radio-input-width: 19rem;
    font-size: 16rem;
    padding: 14rem 10rem;
    font-weight: var(--el-radio-font-weight);
    height: 20rem;
    margin-right: 0;
    .el-radio__label {
      color: #ffffff;
      font-size: 16rem;
      padding-left: 12rem;
    }
  }
  .el-radio__inner {
    background-color: transparent;
  }

  // .el-radio__input.is-checked .el-radio__inner:after {
  //   content: '√';
  //   background-color: #007eff;
  // }
}
:deep(.el-input) {
  --el-input-inner-height: 84rem;
  margin-left: 20rem;
  width: 563rem;
  .el-input__wrapper {
    border: none;
    box-shadow: none;
    background: url('/imgs/bg_搜索框.png') no-repeat center/cover;
    input {
      font-size: 24rem;
      color: #9ba4bb;
      font-family: 'SR';
    }
  }
}
.toggle-btn {
  background: url('imgs/仓储安防切换背景.png') no-repeat center/cover;
}
.is-checked {
  background: url('imgs/库点概览视频监控切换背景.png') no-repeat center/cover;
}
</style>
